/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-hooks/exhaustive-deps */
import React, {useEffect, useState} from 'react';
import {
  Dialog,
  PanningProvider,
  View,
  Text,
  Colors,
  Constants,
  Checkbox,
  SegmentedControl,
  Avatar,
  TouchableOpacity,
} from 'react-native-ui-lib';
import {
  DeviceEventEmitter,
  ScrollView,
  useWindowDimensions,
} from 'react-native';
import {useRequest} from 'ahooks';
import {get} from '@/utils/request';
import Select from '@/components/Select';
import AntdIcons from 'react-native-vector-icons/AntDesign';

const items = {
  0: {
    value: '0',
    statusName: '未开始',
  },
  1: {
    value: '1',
    statusName: '进行中',
  },
  2: {
    value: '2',
    statusName: '已完成',
  },
};

const segments = [
  {
    label: '全部',
    value: null,
  },
].concat(
  Object.values(items).map(it => ({
    label: it.statusName,
    value: it.value,
  })),
);

function Filter({dialog, setDialog, params, setParams, curProject}) {
  const Prefix = global.file;
  const {data} = useRequest(
    async () => {
      if (!curProject?.id) {
        return;
      }
      const res = await get('/project/' + curProject?.id);
      return res?.data?.data;
    },
    {
      debounceWait: 300,
      refreshDeps: [curProject?.id],
    },
  );

  const {width} = useWindowDimensions();

  const renderPannableHeader = props => {
    const {title} = props;
    return (
      <View>
        <View margin-18 row spread>
          <Text heading>{title}</Text>

          <View row centerV>
            <Checkbox
              labelStyle={{marginLeft: 8}}
              color={Colors.primaryColor}
              value={params?.itemType === 2}
              onValueChange={value1 => {
                setParams(s => ({...s, itemType: value1 ? 2 : null}));
              }}
              selectedIcon={require('@/assets/bug.png')}
              iconColor={Colors.white}
              label="缺陷"
            />
          </View>
        </View>
      </View>
    );
  };

  const tagList = useRequest(
    async () => {
      if (!dialog.visible) {
        return;
      }
      let res = await get('/projectTag/selectionByProjectId', {
        projectId: curProject?.id,
      });
      return res.data.dataList;
    },
    {
      refreshDeps: [dialog.visible],
    },
  );

  return (
    <Dialog
      {...dialog}
      renderPannableHeader={renderPannableHeader}
      pannableHeaderProps={dialog}
      panDirection={PanningProvider.Directions.UP}
      top={true}
      width={width - 24}
      // overlayBackgroundColor={'transparent'}
      containerStyle={{
        backgroundColor: Colors.colorCardBg,
        marginTop: Constants.isIphoneX ? 0 : 10,
        borderRadius: 12,
      }}>
      <View padding-18 paddingT-0 gap={12}>
        <View>
          <SegmentedControl
            activeColor={Colors.primaryColor}
            outlineColor={Colors.primaryColor}
            activeBackgroundColor={Colors.colorBgSecondary}
            backgroundColor={Colors.colorBgSecondary}
            style={{
              borderColor: Colors.backgroundColor,
            }}
            initialIndex={
              segments?.map(it => it?.value).indexOf(params?.itemStatus) ?? 0
            }
            onChangeIndex={i => {
              setParams(s => ({
                ...s,
                itemStatus: segments[i]?.value,
              }));
            }}
            segments={segments}
            borderRadius={10}
            segmentsStyle={{
              height: 40,
            }}
          />
        </View>

        <View>
          {!tagList?.loading && (
            <Select
              icon={<AntdIcons name="tag" size={20} />}
              value={
                params?.projectTagIds
                  ?.split?.(',')
                  ?.map(it => it?.toString()) ?? []
              }
              onChange={val => {
                setParams(s => ({
                  ...s,
                  projectTagIds: val?.length !== 0 ? val?.join(',') : null,
                }));
              }}
              options={
                tagList?.data?.map(it => ({
                  ...it,
                  value: it?.value?.toString(),
                })) ?? []
              }
              title="标签"
              mode="multiple"
            />
          )}
        </View>

        <ScrollView
          style={{
            flexWrap: 'wrap',
            maxHeight: 280,
          }}>
          <View row gap={6} style={{flexWrap: 'wrap'}}>
            {data?.userList?.map(it => {
              return (
                <TouchableOpacity
                  style={{
                    width: (width - 78) / 4,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor:
                      params?.userIds === it?.id
                        ? Colors?.primaryColor
                        : Colors.cardbackgroundColor,
                    marginBottom: 6,
                    padding: 12,
                    gap: 6,
                    borderRadius: 6,
                  }}
                  onPress={e => {
                    setParams(s => ({
                      ...s,
                      userIds: s?.userIds === it?.id ? null : it?.id,
                    }));
                  }}>
                  <Avatar
                    source={{
                      uri: Prefix + it?.headUrl,
                    }}
                    size={38}
                    label={it?.headUrl ? null : it?.name?.charAt(0)}
                  />
                  {params?.userIds === it?.id ? (
                    <Text body style={{color: Colors?.white}}>
                      {it?.name}
                    </Text>
                  ) : (
                    <Text body>{it?.name}</Text>
                  )}
                </TouchableOpacity>
              );
            })}
          </View>
        </ScrollView>
      </View>
    </Dialog>
  );
}

export default Filter;
